.index_web
{
    width: 100%;
    overflow: hidden;
    .head
    {
        margin-bottom: 3.5%;
    }
    @media only screen and (max-width:768px)
    {
        .head
        {
            margin-bottom: 12.3%;
        }    
    }
    .middle_pic
    {
        width:100%;
        padding-top: 46%;
        height: 0;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        img
        {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%,-50%);
            transform-origin:center,center;   
        }
    }
    .container
    {
        position: relative;
        .col-md-6,.col-xs-12
        {
            padding-top: 10%;
            .text
            {
                color: #0078d7;
                font-size:50px ;    
            }
            @media only screen and (max-width:768px)
            {
                .text
                {
                    color: #0078d7;
                    font-size:40px ;
                    text-align: center;    
                }
            }
            .text1
            {
                padding-top: 5%;
                font-size:30px ;    
            }
            @media only screen and (max-width:768px)
            {
                .text1
                {
                    padding-top: 10px;
                    font-size:16px ;    
                }   
            }
            .hidden-xs
            {
                position: absolute;
                top:190%;
                right: 10%;
            }
            
        }
        .col-md-6,.col-xs-12
        {
            .box
            {
                width:95%;
                img
                {
                    border-radius: 5px;
                    vertical-align: middle;
                    float: left;
                    padding-right: 5%; 
                }
               
                h4
                {
                    line-height:1.5;
                }
                p
                {
                    
                }
                
            }
             @media only screen and (max-width:768px)
            {
                h4
                {
                    font-size:14px;
                    font-weight: bold;
                }
                p
                {
                    line-height: 1.7;
                    font-size: xx-small;
                }    
            }
        }
    }
    .middle
    {
        
        width: 80%;
        margin:auto;
        margin-top: 15%;
        .col-xs-12,.col-md-6
        {
            padding-top: 3%;
            float: left;
            padding-left: 0;
            img
            {
                padding-left: 0;    
            }
            .text
            {
                h1
                {
                    font-size:50px;
                    color: #8fc31f;        
                }
                 @media only screen and (max-width:768px)
                 {
                    h1
                    {
                        font-size:40px;
                        color: #8fc31f; 
                        text-align: center;       
                    }  
                 }
                
            }    
        }
        .col-md-12
        {
            
            .pic
            {
            }
            .text
            {
            }
            div
            {
                display: inline-block;
            }    
        }
        @media only screen and (max-width:768px)
        {
            .col-md-12
            {
                line-height: 1.5;
                padding-left: 15px;
                margin-top: 10px;
                overflow: hidden;
                .pic
                {
                    padding: 0;
                    
                }
                .text
                {
                    width: 70%;
                    font-size: xx-small;
                    float:right;
                    padding-top: 7%;
                    white-space:nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                }
            }
        }
           
    }
    .middle2
    {
        width: 100%;
        height:900px;
        background: #0079d7;
        margin-top: 10%;
        padding: 0;
        
        .middle_text
        {
            padding-top: 7%;
            text-align: center;
            overflow: hidden;
            h1
            {
                font-size: 3pc;
                color: #fffefe;    
            }   
        }
        .row
        {
            margin-top: 7%;
            width: 100%;
            margin-left: 15%;
            .col-xs-12
            {
                margin: auto;
                div
                {
                    display: inline-block;
                }
                .texte
                {
                    float:right;
                    width: 75%;
                    color: #fffefe;
                    h2
                    {
                        line-height: 1.7;
                    }
                    p
                    {
                        line-height:1.5;   
                    }
                }    
            }
        }   
    }
    @media only screen and (max-width:768px)
    {
        .middle2
        {
            width: 100%;
            height:1600px;
            background: #0079d7;
            margin-top: 10%;
            padding: 0;
            .middle_text
            {
                padding-top: 7%;
                text-align: center;
                overflow: hidden;
                h1
                {
                    font-size: 2pc;
                    color: #fffefe;    
                }   
            }
            .row
            {
                margin-top: 10%;
                width: 100%;
                margin-left: 0%;
                .col-xs-12
                {
                    margin: auto;
                    div
                    {
                        display: inline-block;
                    }
                    .pic
                    {
                        margin-left: 39%;
                        margin-top: 10%;
                    }
                    .texte
                    {
                        float:left;
                        width: 100%;
                        color: #fffefe;
                        margin-top: 10%;
                        h2
                        {
                            line-height: 1.7;
                        }
                        p
                        {
                            line-height:1.5;   
                        }
                    }    
                }
            }   
        }
    }
    .middle3
    {
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 6%;
        .text1
        {
            padding-left: 90%;    
        }
        @media only screen and (max-width:768px)
        {
            .col-md-6
            {
                .text
                {
                    margin-bottom: 10%;
                    margin-top: 5%;
                    h1
                    {
                        font-size: 20px;    
                    }
                }
            }
            
                
        }
        .col-md-4
        {
            margin-top: 5%;
            margin-right: 2%;
            padding-bottom: 5%;
            .pic
            {
                width:100%;
                padding-top: 54%;
                height: 0;
                margin: 0 auto;
                overflow: hidden;
                position: relative;
                img
                {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 100%;
                    transform: translate(-50%,-50%);
                    transition: all 0.8s;
                    transform-origin:center,center;
                }    
            }
        }
        .col-md-7
        {
            margin-top: 3.6%;
            text-align: center;
            .col-md-2
            {
                padding-top: 2%;
            }
        }   
    }
    @media only screen and (max-width:768px)
    {
        .middle3
        {
            width: 95%;
            margin: 0 auto;
            overflow: hidden;
            margin-top: 6%;
            padding-bottom:5%;
            .text1
            {
                padding-left: 90%;    
            }
            @media only screen and (max-width:768px)
            {
                .col-md-6
                {
                    .text
                    {
                        margin-bottom: 10%;
                        margin-top: 5%;
                        h1
                        {
                            font-size: 20px;    
                        }
                    }
                }
            }
            .col-md-4
            {
                margin-top: 5%;
                margin-right: 5%;
                padding-bottom: 5%;
                .pic
                {
                    width:100%;
                    padding-top: 54%;
                    height: 0;
                    margin: 0 auto;
                    overflow: hidden;
                    position: relative;
                    img
                    {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 100%;
                        transform: translate(-50%,-50%);
                        transition: all 0.8s;
                        transform-origin:center,center;
                    }    
                }
            }
            .col-md-7
            {
                margin-top: 3.6%;
                text-align: center;
                .col-md-2
                {
                    padding-top: 2%;
                }
            }   
        }    
    }
    .bigbox
    {
        width: 100%;
        background: #f4f4f4;
        padding-top:0.1% ;
        padding-bottom: 1%;
        .middle4
        {
            width: 80%;
            margin: auto;
            margin-top: 5%;
            margin-bottom: 2%;
            background: #f4f4f4;
            .col-md-6,.col-xs-12
            {
                span
                {
                    font-size: xx-small;    
                }    
            }
            .col-md-2,.col-xs-4
            {
                margin-top: 2.5%;
                div
                {
                    background: white;
                    border: 1px solid #dddddd;
                    border-radius:5px ;
                    width:100%;
                    padding-top: 35%;
                    height: 0;
                    margin: 0 auto;
                    overflow: hidden;
                    position: relative;
                    img
                    {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width:70%;
                        transform: translate(-50%,-50%);
                        transition: all 0.8s;
                        transform-origin:center,center;    
                    }    
                }    
            }    
        }
    }
    @media only screen and (max-width:768px)
    {
        .bigbox
        {
            width: 100%;
            background: #f4f4f4;
            padding-top:0.1% ;
            padding-bottom: 5%;
            .middle4
            {
                width: 96%;
                margin: auto;
                margin-top: 5%;
                margin-bottom: 2%;
                background: #f4f4f4;
                .col-md-6,.col-xs-12
                {
                    span
                    {
                        font-size: xx-small;    
                    }    
                }
                .col-md-2,.col-xs-4
                {
                    margin-top: 2.5%;
                    div
                    {
                        background: white;
                        border: 1px solid #dddddd;
                        border-radius:5px ;
                        width:100%;
                        padding-top: 35%;
                        height: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        position: relative;
                        img
                        {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            width:80%;
                            transform: translate(-50%,-50%);
                            transition: all 0.8s;
                            transform-origin:center,center;    
                        }    
                    }    
                }    
            }
        }
    }
    .foot
    {
        width: 100%;
        background: #3b3b3b;
        padding-top: 3%;
        padding-bottom: 3%;
        .inside_foot
        {
            
            width: 80%;
            margin: auto;
            background: #3b3b3b;
            .col-md-6,.col-xs-4
            {
                color: #a1a3ab;
                .col-md-2,.col-xs-3
                {
                    padding: 0;
                    
                }
            }
            
              
        } 
    }
    @media only screen and (max-width:768px)
    {
        .foot
        {
            width: 100%;
            background: #3b3b3b;
            padding-top: 3%;
            padding-bottom: 3%;
            .inside_foot
            {
                width: 95%;
                margin: auto;
                background: #3b3b3b;
                font-size:xx-small ;
                padding: 0;
                .col-md-6,.col-xs-4
                {
                    color: #a1a3ab;
                    padding-top: 10px;
                    padding-bottom: 5px;
                    .col-md-2,.col-xs-3
                    {
                        padding: 0;
                        
                    }    
                }
                .col-md-6
                {
                        
                }
                
                  
            } 
        }    
    }
        
}
